<template>
  <div class="table-th-group" :style="_style">
    <div class="u-wrap">
      <div class="u-right">{{ rightLabel }}</div>
      <div class="u-left">{{ leftLabel }}</div>
    </div>
  </div>
</template>

<script setup name="TableThGroup">
import { computed } from 'vue'
import { borderColor, thFontSize } from './style'

/**
 * 可通过设置style.padding控制文字间距
 */
const props = defineProps({
  leftLabel: String,
  rightLabel: String,
  style: Object,
})

const _style = computed(() => {
  return Object.assign(
    {
      backgroundImage: `linear-gradient(to bottom left, transparent 49.5%, ${borderColor} 49.5%, ${borderColor} 50.5%, transparent 50.5%)`,
      padding: '12px',
      lineHeight: thFontSize,
    },
    props.style
  )
})
</script>

<style lang="stylus" scoped>
.table-th-group
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  .u-wrap
    position relative
    height 100%
  .u-left
    position absolute
    left 0
    bottom 0
  .u-right
    position absolute
    right 0
    top 0
</style>
